<template>
  <!-- <div class="footer" v-show="tabbarshow"> -->
  <mt-tabbar v-model="selected" v-show="tabbarshow">
    <mt-tab-item id="0" @click.native="goIndex()">
      <i slot="icon" class="iconfont icon-shouye"></i>
      首页
    </mt-tab-item>
    <mt-tab-item id="1">
      <i slot="icon" class="iconfont icon-xihuan"></i>
      关注
    </mt-tab-item>
    <mt-tab-item id="2">
      <i slot="icon" class="iconfont icon-tongzhi"></i>
      通知
    </mt-tab-item>
    <mt-tab-item id="3" @click.native="goMe()">
      <i slot="icon" class="iconfont icon-wode"></i>
      我的
    </mt-tab-item>
  </mt-tabbar>
  <!-- </div> -->
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      selected: "0"
    };
  },
  props: {},
  mounted() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    //this.$store.dispatch("showTabbar", { boolean: "0" });
  },
  watch: {
    selected: function(val, oldVal) {
      // 这里就可以通过 val 的值变更来确定
      console.log(val, oldVal);
      this.$store.dispatch("changePage", { title: val });
    }
  },
  computed: mapGetters({
    tabbarshow: "tabbarshow"
  }),
  methods: {
    goMe() {
      this.$router.push({ path: "/me" });
      console.log("me");
    },
    goIndex() {
      this.$router.push({ path: "/" });
      console.log("me");
    }
  }
};
</script>
<style scoped>
.footer {
  position: relative;
  height: 55px;
}
</style>

